<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	WebDAO dao = new WebDAO();
	ArrayList<ResultRecentPost> recentList = dao.getRecentOpenPosts();
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="com.ssu.judea.travlog.model.WebDAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.ssu.judea.travlog.vo.ResultRecentPost"%><html>
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="http://<%=request.getServerName()%><%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="http://<%=request.getServerName()%><%=request.getContextPath()%>/js/jquery-ui-1.8rc2.custom.min.js"></script>
		
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		
		<script type="text/javascript" src="http://<%=request.getServerName()%><%=request.getContextPath()%>/js/travlog.js"></script>
		<script type="text/javascript">
		 var infowindowArray = [];  
	     var markersArray = []; 
	     var prevIndex = 0;
		 var currentIndex = 0;
		  function initializeInPage() {
			  
			  var points = [];
			  var clickCounter = 1;

			  directionsDisplay = new google.maps.DirectionsRenderer();
			  
			  
		    var latlng = new google.maps.LatLng(37.565100,126.989550);//서울로 시작
		    var myOptions = {
		      zoom: 5,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		    directionsDisplay.setMap(map);

		    /*
		    google.maps.event.addListener(map, 'click', function(event) {
		        placeMarker(event.latLng);
		      });
		     */
		    
	    	function placeMarker(location,content) {		    	
	    	  var marker = addMarker(location);
	    	  
	    	  map.setCenter(location);
    		  var infowindow = new google.maps.InfoWindow({
  		        content: content
  		    	});
    		  infowindowArray.push(infowindow);
		       //infowindow.open(map,marker);
    		  prevIndex++;
	    	}

	    	

	    	function addMarker(location) {
    		  marker = new google.maps.Marker({
    		    position: location,
    		    map: map
    		  });
    		  markersArray.push(marker);
    		  return marker;
    		}

    		// Removes the overlays from the map, but keeps them in the array
    		function clearOverlays() {
    		  if (markersArray) {
    		    for (i in markersArray) {
    		      markersArray[i].setMap(null);
    		    }
    		  }
    		}

    		// Shows any overlays currently in the array
    		function showOverlays() {
    		  if (markersArray) {
    		    for (i in markersArray) {
    		      markersArray[i].setMap(map);
    		    }
    		  }
    		}

    		// Deletes all markers in the array by removing references to them
    		function deleteOverlays() {
    		  if (markersArray) {
    		    for (i in markersArray) {
    		      markersArray[i].setMap(null);
    		    }
    		    markersArray.length = 0;
    		  }
    		}

    		function calcRoute() {
    			  var start = document.getElementById("start").value;
    			  var end = document.getElementById("end").value;
    			  var request = {
    			    origin:start, 
    			    destination:end,
    			    travelMode: google.maps.DirectionsTravelMode.DRIVING
    			  };
    			  directionsService.route(request, function(result, status) {
    			    if (status == google.maps.DirectionsStatus.OK) {
    			      directionsDisplay.setDirections(result);
    			    }
    			  });
    			}
			
	    		<%if(recentList!=null && recentList.size()>0){ %>
				<%for(ResultRecentPost cur : recentList){ %>
					
					placeMarker(new google.maps.LatLng(<%=cur.getLatitude()%>,<%=cur.getLongitude()%>),
							'<p class=\"twitterRegdateNPosts\"><%=cur.getRegdate()%> Posts:<%=cur.getPostscount()%></p>'+
							'<p class=\"twitterId floatRight\">'+
							'by <a href=\"http://<%=request.getServerName()%><%=request.getContextPath()%>/user/<%=cur.getTwitterid() %>\">@<%=cur.getTwitterid() %>'+
							' <img src=\"<%=cur.getMemberimageurl() %>\"/></a><br/>'+
							'<input type=\"button\" onclick=\"location.href=\'http://twitter.com/<%=cur.getTwitterid() %>\';\" value=\"Follow <%=cur.getTwitterid() %>\" class=\"blue twitterFollow\" />'+
							'</p>'
							);
					<%} %>
				<%} %>
				nextFocus();
				setInterval('nextFocus()', 6000);
		  }
		  
		  
		  function nextFocus(){
			  var currentMarker = markersArray[currentIndex];
			  map.panTo(currentMarker.position);
			  if( currentIndex - 1 > -1)	
			  	infowindowArray[currentIndex - 1].close();
			  else
				  infowindowArray[infowindowArray.length-1].close();
			  infowindowArray[currentIndex].open(map,currentMarker);
			  if(currentIndex==markersArray.length-1)
				  currentIndex = 0;
			  else
			  	currentIndex++;
		  }

		</script>
		
		<link rel="stylesheet" type="text/css" href="http://<%=request.getServerName()%><%=request.getContextPath()%>/css/jquery-ui-1.8rc2.custom.css">
		<link rel="stylesheet" type="text/css" href="http://<%=request.getServerName()%><%=request.getContextPath()%>/css/default.css">
		<title>Travlog :: Share your lifelog!</title>
		<script type="text/javascript">
			$(document).ready(function(){
				initializeInPage();
			<%if(request.getAttribute("dispatchAction")!=null){%>
				<%if(request.getAttribute("dispatchAction").toString().equals("afterLogout")){%>
					    alarm('logouted.');
				<%}%>
			<%}%>
			})
		</script>
	</head>
	<body>
		<div id="wrap">
			
			<jsp:include page="commons/header.jsp"></jsp:include>
			
			<div id="content">
				
				<div id="mainMapLayer" class="floatLeft">
					<div id="map_canvas" style="width:100%; height:100%"></div>
				</div>
				<div id="navigator" class="floatLeft">
					<jsp:include page="commons/navigator.jsp"></jsp:include>
				</div>
				<div class="clear"></div>
			</div>
			
			<jsp:include page="commons/footer.jsp"></jsp:include>
			
		</div>
	</body>
</html>